import { useRef, useEffect } from "react"

import { Modal, Form, Input } from 'antd';
import { IGood } from "../../pages/storage"
import { FormInstance } from 'antd/lib/form';


interface IEditProps{
  good?:IGood
  isModalVisible: boolean;
  setVisible: (isModalVisible : boolean , good?:IGood) => void;
}

const Edit = ({ good,isModalVisible,setVisible}: IEditProps) => {
  const formRef = useRef<FormInstance>(null);
  useEffect(()=>{
    formRef.current?.setFieldsValue({...good})
  },[good])

  const handleOk = () => {
    formRef.current?.submit();
  };

  const handleCancel = () => {
    setVisible(false);
  };

  const editType = (currgood:IGood) => {
    console.log(currgood);
    setVisible(false, {...good,...currgood});
  }
  return (
    <>
      <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
      <Form
        ref={ formRef }
        name="good_edit"
        initialValues={{...good}}
        onFinish={ editType }
        autoComplete="off"
      >
        <Form.Item 
          shouldUpdate={(prevValues, curValues) => prevValues.additional !== curValues.additional}
          label="type"
          name="type"
        >
          <Input />
        </Form.Item>
      </Form>
      </Modal>
    </>
  );
};
export default Edit